fix(input): improve autofill by desig9stein · Pull Request #2298 · IgniteUI/igniteui-webcomponents

desig9stein · 2026-07-24T10:34:55Z

Refactored input text color logic to use a custom property (--input-text-color) for compatibility with autofill behavior in WebKit and Chromium.
Replaced transition-delay hack with background-clip: text and -webkit-text-fill-color to ensure proper rendering of autofilled inputs, especially in scenarios like floating labels in the material theme.

Provide a clear and concise summary of the changes in this PR and the motivation behind them

Chromium and WebKit paint an opaque background and a fixed text color on autofilled fields through UA styles marked as! important, which cannot be overridden by author styles. Without this, the autofill background covers the
floating label in the material theme.
Clipping the background to the text makes it invisible, while the text itself is painted through -webkit-text-fill-color, which takes precedence over the UA color. Both are static declarations on purpose - the previous transition-delay hack only held back the background as long as a transition could actually run, so inputs first rendered while already autofilled (a login form in a dialog, for instance) still got the UA styling.

Type of Change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that causes existing functionality to change)
Documentation update
Refactoring (code improvements without functional changes)

Related Issues

Closes #2289

Testing

Checklist

My code follows the project's coding standards
I have tested my changes locally
I have updated documentation if needed
Breaking changes are documented in the description

…l-color` - Refactored input text color logic to use a custom property (`--input-text-color`) for compatibility with autofill behavior in WebKit and Chromium. - Replaced transition-delay hack with `background-clip: text` and `-webkit-text-fill-color` to ensure proper rendering of autofilled inputs, especially in scenarios like floating labels in the material theme.

Copilot

Pull request overview

This PR addresses broken autofill styling in the igc-input component (notably in Material/outlined scenarios) by changing how input text color is authored and by replacing the previous autofill “transition-delay” workaround with a rendering approach based on text clipping and -webkit-text-fill-color.

Changes:

Mirror input text color into a custom property (--input-text-color) so autofilled fields can reliably use it via -webkit-text-fill-color.
Replace the previous autofill transition-delay hack with background-clip: text + -webkit-text-fill-color to prevent the UA autofill background from covering floating labels (especially on first render with autofill).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/components/input/themes/shared/input.material.scss	Sets `--input-text-color` for the Material filled-input part token and uses it for `color`.
src/components/input/themes/shared/input.common.scss	Introduces `--input-text-color` as the source of truth for input text color across common states.
src/components/input/themes/input.base.scss	Updates the autofill styling approach to clip the autofill background to text and paint text via `-webkit-text-fill-color`.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

+    // Chromium and WebKit paint an opaque background and a fixed text color on
+    // autofilled fields through UA styles marked as !important, which cannot be
+    // overridden by author styles. Without this the autofill background covers the
+    // floating label in the material theme.
+    // Clipping the background to the text makes it invisible, while the text itself
+    // is painted through `-webkit-text-fill-color`, which takes precedence over the
+    // UA `color`. Both are static declarations on purpose - the previous
+    // transition-delay hack only held back the background as long as a transition
+    // could actually run, so inputs first rendered while already autofilled
+    // (a login form in a dialog, for instance) still got the UA styling.


simeonoff · 2026-07-27T10:04:48Z

@desig9stein Fix the lint errors please.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/components/input/themes/shared/input.material.scss:67

Selector [part~='input filled'] will never match when part is generated via partMap(this._resolvePartNames('input')) (it produces separate tokens like part="input filled"). Because ~= matches a single whitespace-delimited token, this rule won’t apply, so --input-text-color/color for the filled input state in the material theme won’t be set from this block.

[part~='input filled'] {
    --input-text-color: #{var-get($theme, 'filled-text-color')};

    color: var(--input-text-color);

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/components/input/themes/input.base.scss:59

-webkit-text-fill-color now derives from --input-text-color, but several theme-specific disabled rules set color for [part~='input'] without updating --input-text-color (e.g. src/components/input/themes/shared/input.bootstrap.scss:192+, input.fluent.scss:214+, input.indigo.scss:214+, input.material.scss:742+). If an input is autofilled and later becomes disabled (or if a browser autofills a disabled field), the text fill color can remain stale because --input-text-color is not synced with the disabled color. Consider mirroring the disabled text color into --input-text-color anywhere the input color is overridden, so autofill rendering stays consistent across states.

    &:is(:-webkit-autofill, :autofill) {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: var(--input-text-color, currentcolor);
    }

src/components/input/themes/input.base.scss:48

Minor grammar nit in the new autofill explanation comment: “Without this the autofill background…” reads as missing a comma, which makes the comment harder to scan.

    // Chromium and WebKit paint an opaque background and a fixed text color on
    // autofilled fields through UA styles marked as !important, which cannot be
    // overridden by author styles. Without this the autofill background covers the
    // floating label in the material theme.

- Simplify autofill handling by removing outdated `-webkit-background-clip: text`.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/components/input/themes/input.base.scss:49

To maximize Safari/Chromium interoperability for background-clip: text (the text value is historically implemented behind the -webkit- prefix), add -webkit-background-clip: text alongside the unprefixed declaration.

    &:is(:-webkit-autofill, :autofill) {
        background-clip: text;
        -webkit-text-fill-color: var(--input-text-color, currentcolor);
    }

src/components/input/themes/input.base.scss:45

The comment links to a specific PR review anchor, which is brittle and doesn’t explain the underlying issue for future maintainers. Prefer referencing the tracked issue/PR and a short description of the behavior being worked around.

    // Fix for https://github.com/IgniteUI/igniteui-webcomponents/pull/2298#pullrequestreview-4772572600

desig9stein requested a review from simeonoff July 24, 2026 10:34

desig9stein assigned damyanpetev Jul 24, 2026

Copilot AI review requested due to automatic review settings July 24, 2026 10:34

Copilot started reviewing on behalf of desig9stein July 24, 2026 10:35 View session

Copilot AI reviewed Jul 24, 2026

View reviewed changes

Comment thread src/components/input/themes/input.base.scss

fix(input): add -webkit-background-clip: text

6e1059e

Copilot AI review requested due to automatic review settings July 24, 2026 10:46

Copilot started reviewing on behalf of desig9stein July 24, 2026 10:46 View session

Copilot AI reviewed Jul 24, 2026

View reviewed changes

Comment thread src/components/input/themes/input.base.scss Outdated

Comment thread src/components/input/themes/input.base.scss Outdated

Potential fix for pull request finding

932cf2a

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings July 24, 2026 10:52

Copilot started reviewing on behalf of desig9stein July 24, 2026 10:52 View session

Potential fix for pull request finding

32e6c68

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI reviewed Jul 24, 2026

View reviewed changes

Merge branch 'master' into mpopov/fix-autofill

0a4f6b1

Copilot AI review requested due to automatic review settings August 4, 2026 07:39

Copilot started reviewing on behalf of simeonoff August 4, 2026 07:40 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

Merge branch 'master' into mpopov/fix-autofill

e7e308d

Copilot AI review requested due to automatic review settings August 4, 2026 07:56

Copilot started reviewing on behalf of simeonoff August 4, 2026 07:57 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

fix(input): remove redundant autofill background-clip override

1999dcb

- Simplify autofill handling by removing outdated `-webkit-background-clip: text`.

Copilot AI review requested due to automatic review settings August 4, 2026 08:00

Copilot started reviewing on behalf of desig9stein August 4, 2026 08:01 View session

simeonoff approved these changes Aug 4, 2026

View reviewed changes

Copilot AI reviewed Aug 4, 2026

View reviewed changes

simeonoff merged commit e4b484c into master Aug 4, 2026
8 checks passed

simeonoff deleted the mpopov/fix-autofill branch August 4, 2026 08:05

Navigation Menu

Uh oh!

fix(input): improve autofill - #2298

fix(input): improve autofill#2298
simeonoff merged 7 commits into
masterfrom
mpopov/fix-autofill

desig9stein commented Jul 24, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

simeonoff commented Jul 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

desig9stein commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Type of Change

Related Issues

Testing

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

simeonoff commented Jul 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

desig9stein commented Jul 24, 2026 •

edited

Loading